import { useInfoModal } from "@/app/utils/hooks/useInfoModal";
import { useMovie } from "@/app/utils/hooks/useMovies";
import { useCallback, useEffect, useState } from "react";
import { AiOutlineClose } from "react-icons/ai";
import { PlayButton } from "./PlayButton";

// interface InfoModalProps {
//     visible: boolean
//     onClose: any
// }
const InfoModal = () => {
    const { movieId, isOpen, closeModal } = useInfoModal()
    const { data = {} } = useMovie(movieId as unknown as number)
    if (!isOpen) return null
    return (<>
        <div className="z-50 transition duration-300 bg-black bg-opacity-80 flex justify-center items-center overflow-x-hidden overflow-y-auto fixed  inset-0">
            <div className={`${isOpen ? 'scale-100' : 'scale-0'}  duration-500 relative flex items-center justify-center bg-zinc-900 drop-shadow-md w-[50vw] transition`}>
                <div className="relative h-96 ">
                    <video className="w-full brightness-[60%] object-cover h-full" autoPlay muted loop poster={data?.thumbnailUrl} src={data?.videoUrl} />
                    <div className="cursor-pointer absolute top-3 right-3 h-18 w-18 rounded-full bg-black bg-opacity-70 flex items-center p-1 justify-center hover:scale-110 hover:rotate-90 transition delay-100 hover:bg-red-400" onClick={closeModal}>
                        <AiOutlineClose className="text-white" size={20} />
                    </div>
                    <div className="absolute flex flex-col bottom-0 gap-y-2 left-10">
                        <div>
                            <PlayButton movieId={data?.id} />
                        </div>
                        <p className="text-white text-3xl md:text-4xl  lg:text-5xl font-bold">
                            {data?.title}
                        </p>
                        <p className="text-green-400 font-semibold mb-4">
                            New <span className="text-white">2023</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </>);
}

export default InfoModal;
